<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>模版1数据编辑</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

<div class="layui-body">
	
	<blockquote class="layui-elem-quote" th:text="${errorMsg}" th:style="'color: red;display:' + (${errorMsg} == null ? 'none' : 'block')"></blockquote>
	
	<form class="layui-form" th:action="@{/channel_data/tmp3/save}" method="post">
		<input type="hidden" name="channelId" th:value="${channelId}">
		<input type="hidden" name="location" th:value="${location}">
		
	  	<div class="layui-form-item">
		    <label class="layui-form-label"><span style="color: red;">*</span>标题</label>
		    <div class="layui-input-inline">
		      	<input name="title" class="layui-input" type="text" placeholder="请输入" maxlength="12"
		      			th:value="${channelData == null} ? '' : ${channelData.title}"
		      			autocomplete="off" lay-verify="required|title">
		    </div>
		    <div class="layui-input-inline layui-form-mid layui-word-aux">
		    	请输入6～12字
		    </div>
	  	</div>
	  	<div class="layui-form-item">
		    <label class="layui-form-label"><span style="color: red;">*</span>图片</label>
		    <div id="img" class="layui-input-inline">
		    	<img height="120px" width="194px" data-th-if="${channelData} != null" data-th-src="${channelData.imgUrl}">
		    </div>
		    <div class="layui-input-inline">
		    	<input onchange="onFileChange(event, 'img')" type="file" name="file" id="file" >
		    	<span style="color: red;">仅限jpg,图片的尺寸194*120,不得超过100k</span>
		    </div>
	  	</div>
	  	<input id="imgInput" type="hidden" name="imgUrl" lay-verify="img" 
			th:value="${channelData == null} ? '' : ${channelData.imgUrl}">
	  	<div class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>跳转方式</label>
      		<div class="layui-input-inline">
    			<select id="gotoMethod" name="gotoMethod" lay-filter="gotoMethod">
    				<option th:each="gotoMethod : ${gotoMethods}" th:value="${gotoMethod.id}" th:text="${gotoMethod.name}"	
    					th:selected="${channelData == null} ? ${gotoMethod.id == 0} : ${channelData.gotoMethod == gotoMethod.id}"></option>
       			</select>
     		</div>
  		</div>
  		<div id="urlDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>跳转地址</label>
      		<div class="layui-input-inline">
      			<input name="url" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoUrl"
      				th:value="${channelData == null} ? '' : ${channelData.url}">
     		</div>
  		</div>
  		<div id="appIdDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>开发者平台App ID</label>
      		<div class="layui-input-inline">
      			<input name="appId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoAppId"
      				th:value="${channelData == null} ? '' : ${channelData.appId}">
     		</div>
  		</div>
  		<div id="cardDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>帖子ID</label>
      		<div class="layui-input-inline">
      			<input name="cardId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoCard"
      				th:value="${channelData == null} ? '' : ${channelData.cardId}">
     		</div>
  		</div>
  		<div id="groupFeedDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>小组的feedId</label>
      		<div class="layui-input-inline">
      			<input name="groupFeedId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoGroupFeed"
      				th:value="${channelData == null} ? '' : ${channelData.groupFeedId}">
     		</div>
  		</div>
  		<div id="groupChatDiv" class="layui-form-item">
      		<label class="layui-form-label"><span style="color: red;">*</span>群聊ID</label>
      		<div class="layui-input-inline">
      			<input name="groupChatId" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="gotoGroupChat"
      				th:value="${channelData == null} ? '' : ${channelData.groupChatId}">
     		</div>
  		</div>
		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
      			<a th:href="@{/channel_data/tmp3/list(channelId=${channelId})}"  class="layui-btn">取消</a>
    		</div>
  		</div>
	</form>
	
	<div style="height: 70px"></div>
</div>
  
</div>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
$(document).ready(function(){ 
	$(".layui-body").css({"left": "10px","top": "10px"});
}); 
//一般直接写在一个js文件中
var form;
layui.use(['layer', 'form'], function(){
	var layer = layui.layer;
	form = layui.form;
	
	//$("[name='supportServiceId']").each(function() {
		
	//});
	form.verify({
		title: function(value, item) {
			if(value.length < 6 || value.length > 12)
				return '限制6～12字';
		}
		, gotoUrl: function(value, item) {
			if($("#gotoMethod").val() == 0 || $("#gotoMethod").val() == 1) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoAppId: function(value, item) {
			if($("#gotoMethod").val() == 1) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoCard: function(value, item) {
			if($("#gotoMethod").val() == 2) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoGroupFeed: function(value, item) {
			if($("#gotoMethod").val() == 2 || $("#gotoMethod").val() == 4) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, gotoGroupChat: function(value, item) {
			if($("#gotoMethod").val() == 5) {
				if(value == null || value.length == 0)
					return '必填项不能为空';
			}
		}
		, img: function(value, item) {
			if(value == null || value.length == 0)
				return '请选择一张jpg图片：尺寸194*120,不得超过10k';
		}
	});
	
	form.on('select(gotoMethod)', showGotoData);
	showGotoData();
});

function showGotoData() {
	$("#urlDiv").hide();
	$("#appIdDiv").hide();
	$("#cardDiv").hide();
	$("#groupFeedDiv").hide();
	$("#groupChatDiv").hide();
	if($("#gotoMethod").val() == 0) {
 		$("#urlDiv").show();
 	} else if($("#gotoMethod").val() == 1) {
 		$("#urlDiv").show();
 		$("#appIdDiv").show();
 	} else if($("#gotoMethod").val() == 2) {
 		$("#cardDiv").show();
 		$("#groupFeedDiv").show();
 	} else if($("#gotoMethod").val() == 3) {
 		//  不做任何处理
	} else if($("#gotoMethod").val() == 4) {
		$("#groupFeedDiv").show();
	} else if($("#gotoMethod").val() == 5) {
		$("#groupChatDiv").show();
	}
}

function onFileChange (e, val) {
	let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
       return;
    };
	createImage(files, val);
}
/*
function createImage (file, val) {
 	var self = this;
 	
 	// 校验图片长宽
 	var limitWidth = 96;
 	var limitHeight = 60;
 	if(val == 'smallImg') {
 		limitWidth = 18;
 		limitHeight = 18;
 	}
 	
 	var fileData = file[0];
 	//读取图片数据
 	var isAllow = false;
 	var reader = new FileReader();
 	reader.onload = function (e) {
 		var data = e.target.result;
 		//加载图片获取图片真实宽度和高度
 		var image = new Image();
 		image.onload = function() {
 		 	width = image.width;
 			height = image.height;
 			if(width == limitWidth && height == limitHeight)
 				isAllow = true;
 		};
 		image.src= data;
 	};
 	reader.readAsDataURL(fileData);
 	if(!isAllow) {
 		//layer.msg('请上传' + limitWidth + '*' + limitHeight + "的图片");
 		//return;
 	}
 	
 	// 校验图片大小
 	var maxSize;
 	if(val == 'smallImg')
 		maxSize = 10;
 	else
 		maxSize = 100 ;
    var size = fileData.size;
    if (size > maxSize * 1024) {
    	layer.msg("图片大小不能超过" + maxSize + "k");
        return;
    }
*/
  /*  $.get('http://qiniu.systoon.com/getToken.php', function(e) {
       var formData = new FormData();
       formData.append('token', e);
       formData.append('file', file[0]);
       $.ajax({
           url: 'http://upload.qiniu.com',
           type: 'POST',
           data: formData,
           async: false,
           cache: false,
           contentType: false,
           processData: false,
           success: function(e) {
               var url = 'http://apr.qiniu.toon.mobi/' + e.key;
               $("#" + val).html('<img width="' + limitWidth + 'px" height="' + limitHeight + 'px" src="' + url + '">');
               $("#" + val + "Input").val(url);
               form.render();
           },
           error: function(e) {
        	   layer.msg('上传失败，请重新上传' + e);
           }
       });
   }); 
} */
function createImage (file, val) {
 	var self = this;
 	
 	var fileData = file[0];
 	
 	// 校验图片大小
 	var maxSize = 100;
 	
    var size = fileData.size;
    if (size > maxSize * 1024) {
    	layer.msg("图片大小不能超过" + maxSize + "k");
        return;
    }
    
 	// 校验图片长宽
 	var limitWidth = 194;
 	var limitHeight = 120;
 	
 	//读取图片数据
 	//var isAllow = false;
 	var reader = new FileReader();
 	reader.onload = function (e) {
 		var data = e.target.result;
 		//加载图片获取图片真实宽度和高度
 		var image = new Image();
 		image.onload = function() {
 		 	width = image.width;
 			height = image.height;
 			if(width == limitWidth && height == limitHeight) {
 				uploadToQiniuyun(val, limitWidth, limitHeight, fileData)
 			} else 
 				layer.msg('请上传' + limitWidth + '*' + limitHeight + "的图片");
 		};
 		image.src= data;
 	};
 	reader.readAsDataURL(fileData);
}
function uploadToQiniuyun(val, limitWidth, limitHeight, fileData) {
	$.get('http://qiniu.systoon.com/getToken.php', function(e) {
	       var formData = new FormData();
	       formData.append('token', e);
	       formData.append('file', fileData);
	       $.ajax({
	           url: 'http://upload.qiniu.com',
	           type: 'POST',
	           data: formData,
	           async: false,
	           cache: false,
	           contentType: false,
	           processData: false,
	           success: function(e) {
	               var url = 'http://apr.qiniu.toon.mobi/' + e.key;
	               $("#" + val).html('<img width="' + limitWidth + 'px" height="' + limitHeight + 'px" src="' + url + '">');
	               $("#" + val + "Input").val(url);
	               form.render();
	           },
	           error: function(e) {
	        	   layer.msg('上传失败，请重新上传' + e);
	           }
	       });
	   });
}
</script>
</body>
</html>